<!--  toolBar   -->
<section class="mb-md d-flex">
  <div class="mr-md" *ngIf="_config.exportFile">
    <button nz-button nzType="primary" (click)="exportFile()">导出数据</button>
  </div>
  <div class="flex-1">
    <ng-template [ngTemplateOutlet]="tmp"></ng-template>
  </div>
</section>

<!--    table区    -->
<nz-card>
  <nz-table #ajaxTable [nzData]="listData" [nzFrontPagination]="false" [nzLoading]="loading" [(nzPageIndex)]="param.pageNum" [(nzPageSize)]="param.pageSize"
    [nzTotal]="param.total" [nzShowTotal]="totalTpl" nzShowSizeChanger (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)"
  >
    <thead nzSingleSort (nzSortChange)="sort($event)">
    <tr>
<!--      复选框     -->
      <th [nzShowCheckbox]="_config.showCheckBox" [(nzChecked)]="isAllDisplayDataChecked"
          [nzIndeterminate]="isIndeterminate"
          (nzCheckedChange)="checkAll($event)"></th>
<!--      标题栏     -->
      <ng-container *ngFor="let item of stConfig">
        <th *ngIf="!item.hide" [nzShowSort]="true" [nzSortKey]="item.index">{{item.title}}</th>
      </ng-container>
    </tr>
    </thead>
    <tbody>

<!--    搜索栏   -->
      <tr class="search-bar">
        <td *ngIf="_config.showCheckBox"></td>
        <td *ngFor="let item of _config.columns">
          <div *ngIf="item.filter">
            <ng-template *ngIf="item.filter.type === 'select'" [ngTemplateOutlet]="dropdownTmp"
                         [ngTemplateOutletContext]="{$implicit: item}"></ng-template>
            <ng-template *ngIf="item.filter.type === 'string'" [ngTemplateOutlet]="stringTmp"
                         [ngTemplateOutletContext]="{$implicit: item}"></ng-template>
            <ng-template *ngIf="item.filter.type === 'date'" [ngTemplateOutlet]="dateTmp"
                         [ngTemplateOutletContext]="{$implicit: item}"></ng-template>
            <ng-template *ngIf="item.filter.type === 'dateRange'" [ngTemplateOutlet]="dateRageTmp"
                         [ngTemplateOutletContext]="{$implicit: item}"></ng-template>
          </div>
        </td>
        <td *ngIf="_config.editBtn && _config.editBtn.length > 0"></td>
      </tr>


<!--    列表内容    -->
      <tr *ngFor="let column of ajaxTable.data">
        <td [nzShowCheckbox]="_config.showCheckBox" [nzDisabled]="column.disabled"
            [(nzChecked)]="mapOfCheckedId[column.id]" (nzCheckedChange)="refreshStatus()"></td>
        <ng-container *ngIf="!column.hide">
          <td *ngFor="let item of stConfig">{{column[item.index]}}</td>
        </ng-container>
      </tr>
    </tbody>
  </nz-table>
</nz-card>

<!--  输入框搜索  -->
<ng-template #stringTmp let-item>
  <input [placeholder]="item.filter.placeholder || item.title" nz-input type="text" [(ngModel)]="param[item.index]" (keydown.enter)="searchData(true)"
         >
</ng-template>

<!--下拉选择-->
<ng-template #dropdownTmp let-item>
  <nz-select [nzPlaceHolder]="item.filter.placeholder || item.title" style="width: 100%;border: none !important;"
             [(ngModel)]="param[item.index]" (ngModelChange)="nzEvent($event, item)">
    <nz-option nzCustomContent *ngFor="let option of item.filter.items" [nzLabel]="option.label" [nzValue]="option.value">
      <span nz-tooltip [nzTooltipTitle]="option.label" nzTooltipPlacement="right">{{option.label}}</span>
    </nz-option>
  </nz-select>
</ng-template>


<!--日期选择-->
<ng-template #dateTmp let-item>
  <nz-date-picker [nzPlaceHolder]="item.filter.placeholder || item.title" [(ngModel)]="param[item.index]"
                  (ngModelChange)="nzEvent($event, item)"></nz-date-picker>
</ng-template>


<!-- 日期范围选择 -->
<ng-template #dateRageTmp>
  <nz-range-picker></nz-range-picker>
</ng-template>


<!--列表分页 total-->
<ng-template #totalTpl let-total>
  共 {{total}} 条
</ng-template>
